<script setup lang="ts">
import Header from '../common/header.vue'
import Footer from '../common/footer.vue'
import Banner from '../home/banner.vue'

import Muban_5 from './jingtaimuban/High-pressure.vue'
import Muban_6 from './jingtaimuban/SS.vue'
import Muban_7 from './jingtaimuban/GasHeater.vue'
import Muban_8 from './jingtaimuban/ElectricHeater.vue'
import Muban_9 from './jingtaimuban/Hoses.vue'
import Muban_10 from './jingtaimuban/BoarCart.vue'
import Muban_11 from './jingtaimuban/FPRFAN.vue'
import Muban_12 from './jingtaimuban/FarmDoor.vue'
import Muban_13 from './jingtaimuban/Plate.vue'
import Muban_14 from './jingtaimuban/Heat-Clean.vue'

// import Muban_oem_1 from './muban_oem/Welding_of_metals.vue'

import Muban_aboutus from './muban_aboutus/aboutus.vue'
import Muban_factory from './muban_aboutus/factory.vue'
import Muban_milestone from './muban_aboutus/milestone.vue'

import Muban_distribution_box from './muban_agency/distribution_box.vue'
import Muban_socket_type_welded_joint from './muban_agency/socket_type_welded_joint.vue'
import Muban_quick_couplings from './muban_agency/quick_couplings.vue'
import Muban_cooling_pad from './muban_agency/cooling_pad.vue'

import Muban_laser_cutting_service from './muban_oem/laser_cutting_service.vue'
import Muban_welding_of_metals from './muban_oem/welding_of_metals.vue'
import Muban_pipe_and_tube from './muban_oem/pipe_and_tube.vue'
import Muban_plastic_injection from './muban_oem/plastic_injection.vue'
import Muban_stamping from './muban_oem/stamping.vue'
import Muban_surface_treatment from './muban_oem/surface_treatment.vue'
import Muban_electrical_assembly from './muban_oem/electrical_assembly.vue'
import Muban_sheet_metal_working from './muban_oem/sheet_metal_working.vue'
import Muban_turning_processing from './muban_oem/turning_processing.vue'
import Muban_mechanical_assembly from './muban_oem/mechanical_assembly.vue'

import Muban_high_pressure_fogging_system from './muban_solutions/high_pressure_fogging_system.vue'
import Muban_stationary_high_pressure_cleaner from './muban_solutions/stationary_high_pressure_cleaner.vue'
import Muban_vehicle_drying_system from './muban_solutions/vehicle_drying_system.vue'
import Muban_electric_heating_drying_system from './muban_solutions/electric_heating_drying_system.vue'
import Muban_dry_feeding_system from './muban_solutions/dry_feeding_system.vue'
import Muban_uv_water from './muban_solutions/uv_water.vue'
import Muban_climate_control_system from './muban_solutions/climate_control_system.vue'
import Muban_system_renovation_maintenance from './muban_solutions/system_renovation_maintenance.vue'



import { ref } from 'vue';
import axios from 'axios';
import { useRoute } from 'vue-router';


const article_id = ref('');
const article_info = ref({});
const route = useRoute();
article_id.value = route.params.id;
const get_article = () => {

    const url = window.web_url + '/api/cms.article.single/' + route.params.id;

    axios.get(url).then(res => {


        article_info.value = res.data;

        setTimeout(() => {

            // oem 分类下详情页面的轮播
            var OEMSwiper = new Swiper('.oem-lunbo .swiper', {
            // Swiper配置项
                loop: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
            });

            // 代理产品,关于我们 分类下详情页面的轮播
            var AgencySwiper = new Swiper('.container .swiper', {
            // Swiper配置项
                loop: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
            });

        }, 100);
    });


}

get_article();
</script>

<template>
    <Header></Header>


    <main class="main-content js-main-content">

        <!-- <Banner></Banner> -->

        <div v-if="article_info.article">
            <div v-bind:innerHTML="article_info.article.content"></div>
        </div>


        <template v-if="!article_info.article">

            <Muban_5 v-if="article_id == 5"></Muban_5>
            <Muban_6 v-if="article_id == 6"></Muban_6>
            <Muban_7 v-if="article_id == 7"></Muban_7>
            <Muban_8 v-if="article_id == 8"></Muban_8>
            <Muban_9 v-if="article_id == 9"></Muban_9>
            <Muban_10 v-if="article_id == 10"></Muban_10>
            <Muban_11 v-if="article_id == 11"></Muban_11>
            <Muban_12 v-if="article_id == 12"></Muban_12>
            <Muban_13 v-if="article_id == 13"></Muban_13>
            <Muban_14 v-if="article_id == 14"></Muban_14>


            <!-- 关于我们页面 -->
            <Muban_aboutus v-if="article_id == 'aboutus'"></Muban_aboutus>
            <Muban_factory v-if="article_id == 'factory'"></Muban_factory>
            <Muban_milestone v-if="article_id == 'milestone'"></Muban_milestone>

            <!-- 代理产品页面 -->
            <Muban_distribution_box v-if="article_id == 'distribution_box'"></Muban_distribution_box>
            <Muban_socket_type_welded_joint v-if="article_id == 'socket_type_welded_joint'"></Muban_socket_type_welded_joint>
            <Muban_quick_couplings v-if="article_id == 'quick_couplings'"></Muban_quick_couplings>
            <Muban_cooling_pad v-if="article_id == 'cooling_pad'"></Muban_cooling_pad>

            <!-- OEM页面 -->
            <Muban_laser_cutting_service v-if="article_id == 'laser_cutting_service'"> </Muban_laser_cutting_service>
            <Muban_welding_of_metals v-if="article_id == 'welding_of_metals'"> </Muban_welding_of_metals>
            <Muban_pipe_and_tube v-if="article_id == 'pipe_and_tube'"> </Muban_pipe_and_tube>
            <Muban_plastic_injection v-if="article_id == 'plastic_injection'"> </Muban_plastic_injection>
            <Muban_stamping v-if="article_id == 'stamping'"> </Muban_stamping>
            <Muban_surface_treatment v-if="article_id == 'surface_treatment'"> </Muban_surface_treatment>
            <Muban_electrical_assembly v-if="article_id == 'electrical_assembly'"> </Muban_electrical_assembly>
            <Muban_sheet_metal_working v-if="article_id == 'sheet_metal_working'"> </Muban_sheet_metal_working>
            <Muban_turning_processing v-if="article_id == 'turning_processing'"> </Muban_turning_processing>
            <Muban_mechanical_assembly v-if="article_id == 'mechanical_assembly'"> </Muban_mechanical_assembly>

            <!-- Solutions 页面 -->
            <Muban_high_pressure_fogging_system v-if="article_id == 'high_pressure_fogging_system'">
            </Muban_high_pressure_fogging_system>
            <Muban_stationary_high_pressure_cleaner v-if="article_id == 'stationary_high_pressure_cleaner'">
            </Muban_stationary_high_pressure_cleaner>
            <Muban_vehicle_drying_system v-if="article_id == 'vehicle_drying_system'"> </Muban_vehicle_drying_system>
            <Muban_electric_heating_drying_system v-if="article_id == 'electric_heating_drying_system'">
            </Muban_electric_heating_drying_system>
            <Muban_dry_feeding_system v-if="article_id == 'dry_feeding_system'"> </Muban_dry_feeding_system>
            <Muban_uv_water v-if="article_id == 'uv_water'"> </Muban_uv_water>
            <Muban_climate_control_system v-if="article_id == 'climate_control_system'"> </Muban_climate_control_system>
            <Muban_system_renovation_maintenance v-if="article_id == 'system_renovation_maintenance'">
            </Muban_system_renovation_maintenance>
        </template>


    </main>

    <Footer></Footer>
</template>       

<style lang="less">
.banner__label {
    color: #004d7b;
}

.article-title {
    text-align: center;
}

.item {
    margin-top: 20px;

    .title {

        margin: 20px 0;

        span {
            width: 50%;

            display: inline-block;
            line-height: 2;
            text-align: center;
            background-color: #004d7b;
            border-radius: 20px;
            color: #fff;
            font-weight: bold;
            font-size: 18px;

            padding: 0 30px;
            margin-bottom: 10px;
        }
    }
}

@media screen and (max-width: 975px) {

    .item {
        .title {
            span {

                width: 100%;

            }
        }
    }

    .img-word {

        .item {

            text-align: center;

            table {

                width: 100% !important;

            }

        }
    }
}

.t-l {
    text-align: left;
}

.t-r {
    text-align: right;
}


.img-word {
    display: flex;
    flex-wrap: wrap;

    .item {

        flex: 1;
        min-width: 450px;
        text-align: center;

        img {
            // width:100%;
            max-width: 480px;
            max-height: 500px;
        }

        table {

            width: 100%;
        }
    }
}


.ul-dian {

    list-style: disc;
    margin: 20px;
    text-align: left;

    li {
        list-style: disc;
        margin: 10px 0;
    }
}</style>